<template>
    <div class="left_box_1">

        <div class="top_box">
            各项目收料统计分析
        </div>

        <!-- 出勤 -->
        <div class="right_box">

            <div class="right_box_tab">
                <div @click="swithTabs(item,index)" v-for="(item,index) in indexs" :key="index" :class="[index == tabsInitNum ? 'active' : 'inactive']"> {{item.name}}</div>
            </div>

            <div class="right_box_num">
                <div>184</div>
                <span>收料共计(车)</span>
            </div>

            <!-- echarts -->
            <div style="width: 100%; height: 100%;" ref="chart"></div>
        </div>

    </div>

</template>

<script>
let Echarts = require('echarts/lib/echarts'); //基础实例 注意不要使用import
require('echarts/lib/chart/bar'); //按需引入 bar = 柱状图
export default {
    name: "index",
    data() {
        return {
            // Tabs集合
            indexs: [
                {
                    name: '今日',
                    type: 'day'
                },
                {
                    name: '本月',
                    type: 'month'
                },
                {
                    name: '累计',
                    type: 'acc'
                },
            ],
            tabs: [
                {
                    url: 'https://sp-1304930898.cos.ap-nanjing.myqcloud.com/zhgd/attendance.png',
                    num: '21676',
                    txt: '出勤总人次'
                },
                {
                    url: 'https://sp-1304930898.cos.ap-nanjing.myqcloud.com/zhgd/onDuty.png',
                    num: '74858',
                    txt: '在岗总人次'
                },
                {
                    url: 'https://sp-1304930898.cos.ap-nanjing.myqcloud.com/zhgd/rate.png',
                    num: '28.96%',
                    txt: '平均出勤率'
                }
            ],

        };
    },
    methods: {
        async initData() {
            let request = {
                type: 'day'
            }

            let res = await new this.Request(
                this.Urls.m().projectsDataPerDay,
                this.$qs.stringify(request)).modepost();
            console.log(JSON.stringify(res))
        },

        initEcharts() {
            //2.初始化
            this.chart = Echarts.init(this.$refs.chart);
            //3.配置数据
            let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'dashed',
                        lineStyle: {
                            opacity: 0,
                        },
                    },
                    backgroundColor: 'rgba(39,42,49,0.7)', //设置背景图片 rgba格式
                    borderColor: 'rgba(39,42,49,0.7)', //设置边框颜色
                    textStyle: {
                        color: "#fff" //设置文字颜色
                    },
                },
                grid: {
                    top: '10%',  // 组件离容器上侧的距离,百分比字符串或整型数字
                    left: '0%',    // 组件离容器左侧的距离,百分比字符串或整型数字
                    right: '0%',
                    bottom: '17%',
                    containLabel: true //grid 区域是否包含坐标轴的刻度标签，
                },
                legend: {
                    textStyle: {
                        fontSize: 12,//字体大小
                        color: '#ffffff'//字体颜色
                    },
                    bottom: '7%'

                },
                dataZoom: [//滑动条
                    {
                        xAxisIndex: 0,//这里是从X轴的0刻度开始
                        show: true,//是否显示滑动条，不影响使用
                        type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                        startValue: 0, // 从头开始。
                        height: 0,
                        endValue: 3, // 一次性展示6个。
                        bottom: '5%',
                        zoomLock: true,
                        borderColor: 'transparent',
                        // dataBackgroundObject: '#070f22',
                    }

                ],
                xAxis: [
                    {
                        type: 'category',
                        data: ['朗月书苑', '皖东人民医院', '明光市体育中心', '滁州新悦城', '宿州循环经济产业园', '亳州翁庄还原小区'],
                        color: '#D7D8DA',//字体颜色
                        axisPointer: {
                            type: 'shadow'
                        },
                        // x轴坐标颜色
                        axisLine: {
                            lineStyle: {
                                color: '#868C96',
                            }
                        },
                    }
                ],
                yAxis: [
                    {
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                color: '#414b5d'
                            }
                        },
                        type: 'value',
                        min: 0,
                        max: 20,
                        interval: 20,
                        axisLabel: {
                            formatter: '{value}'
                        },
                        splitNumber: 1,
                        // x轴坐标颜色
                        axisLine: {
                            lineStyle: {
                                color: '#D7D8DA',
                            }
                        },
                    },
                    {
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                color: '#414b5d'
                            }
                        },
                        // type: 'value',
                        // min: 0,
                        // max: 35,
                        // interval: 5,
                        // axisLabel: {
                        //     formatter: '{value} %'
                        // },
                        // y轴坐标颜色
                        axisLine: {
                            lineStyle: {
                                color: '#D7D8DA',
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '出勤总人数',
                        type: 'bar',
                        barMaxWidth: 15,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value;
                            }
                        },
                        data: [15, 12, 12, 10, 6, 3]
                    },
                ]
            };

            // 4.传入数据
            this.chart.setOption(option);
        },


    },

    mounted() {
        this.initData()
        this.initEcharts()
    }
};
</script>

<style scoped="scoped">
.left_box_1 {
    border: 1px solid #258add;
    background-color: #04152e;
    display: flex;
    height: 100%;
    width: 100%;
    position: relative;
}
.top_box {
    position: absolute;
    left: 30px;
    top: -10px;
    color: #03fafb;
    font-size: 15px;
    text-shadow: 0 0 0.5rem #00d8ff;
}
.left_box {
    margin: 10px 0px 10px 20px;
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-around;
}
.left_box_item {
    display: flex;
    align-items: center;
}
.left_box_item img {
    width: 35px;
    height: 35px;
}
.left_box_item_title {
    margin-left: 10px;
}
.left_box_item_title_num {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
}
.left_box_item_title_txt {
    font-size: 13px;
    color: #9ca1aa;
}

.right_box_num div {
    font-size: 20px;
    margin-bottom: 0.625rem;
    line-height: 5px;
    color: #00dfef;
}
.right_box_num span {
    color: #c1c2cb;
    font-size: 12px;
}

.right_box {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    margin: 10px 10px 10px 60px;
}
.right_box_tab {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    font-size: 13px;
}
.right_box_tab div {
    padding: 5px 7px;
    cursor: pointer;
}

.echarts {
    background-color: #04152e;
}
</style>
